<template>
  <ElPopover
    ref="popover"
    width="220"
    :placement="placement"
    :reference="reference"
    popper-class="fa-widget-popover fa-contract-scope"
    @after-leave="afterClose"
  >
    <ElForm class="fa-date-sign-form" :model="data" size="small" @submit.native.prevent>
      <header class="fa-widget-popover__hd">
        日期设置

        <ElCheckbox v-model="options.dateSignGlobal" @change="options.dateSignGlobal && $emit('change')"
          >应用于全局</ElCheckbox
        >
      </header>

      <DateSignSetting :data="data" :disabled="data.isView || data.isDone" @change="$emit('change')" />
    </ElForm>
  </ElPopover>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import DateSignSetting from './DateSignSetting.vue'
import { SignOptions } from '@/types'
import { Widget } from '@/models'
import usePopover from '@/utils/compositions/usePopover'

export default defineComponent({
  name: 'FaDateSignSettingPop',

  components: { DateSignSetting },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 签署选项 */
    options: {
      type: Object as PropType<SignOptions>,
      required: true
    },

    /** 位置 */
    placement: {
      type: String,
      default: 'left-start'
    },

    /** 触发节点 */
    reference: {
      type: HTMLElement as PropType<HTMLElement | null>
    }
  },

  setup(props, { emit }) {
    return usePopover(emit)
  }
})
</script>

<style lang="scss">
.fa-date-sign-form {
  .el-form-item {
    margin-bottom: 16px;

    &__content {
      font-size: 14px;
    }
  }
}
</style>
